import 'base_chart.dart';
import 'package:flutter/material.dart';
import 'extensions/extension-china-map.dart';
import 'package:ribo_base_core/base_models/base_chart_model.dart';
import 'package:ribo_base_core/base_models/base_chart_china_map_model.dart';

class BaseChartChinaMapFull extends StatefulWidget {

  BaseChartChinaMapFull({ Key key, @required this.model }) : super(key: key);

  final BaseChartChinaMapModel model;

  @override
  _BaseChartChinaMapFullState createState() => _BaseChartChinaMapFullState();

}

class _BaseChartChinaMapFullState extends State<BaseChartChinaMapFull> {

  Map<String, dynamic> _option;

  @override
  Widget build(BuildContext context) {
    _handleModel();
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          children: [
            _buildCloseButtonWidget(),
            Expanded(child: _buildScaffoldWidget()),
          ],
        ),
      ),
    );
  }

  Widget _buildCloseButtonWidget() {
    return Container(
      margin: const EdgeInsets.only( right: 24.0 ),
      alignment: Alignment.centerRight,
      child: InkWell(
        onTap: _onCloseScreen,
        child: Container(
          width: 40.0,
          height: 40.0,
          alignment: Alignment.center,
          child: Icon( Icons.close, size: 24.0 ),
        ),
      ),
    );
  }

  Widget _buildScaffoldWidget() {
    String name = widget.model?.name??'china';
    String code = widget.model?.code??'100000';
    return FutureBuilder<String>(
      future: ExtensionChinaMap.registerMapByCode(name,code),
      builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
        if (snapshot.hasData) {
          return Column(
            children: [
              Expanded(child: BaseChart(model: BaseChartModel(style: widget.model?.style, option: this._option, extensions: [snapshot.data], extraScript: '''
  chart.getZr().on('click', (params) => {
    if ( params.target ) {
       return;
    } else { 
       chart.dispatchAction({ type:'select', dataIndex: -1 });
    }
  });
'''),)),
              _buildFooterWidget(),
            ],
          );
        }
        return Container();
      },
    );
  }

  Widget _buildFooterWidget() {
    List<BaseChartPiecesData> pieces = widget.model?.pieces;
    if ( pieces == null || pieces.length == 0 ) {
      return SizedBox();
    }
    return _buildFooterContentWidget( pieces );
  }

  Widget _buildFooterContentWidget( List<BaseChartPiecesData> pieces ) {
    return Container(child: _buildVisualMapWidget( pieces ), padding: const EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 16.0),);
  }

  Widget _buildVisualMapWidget( List<BaseChartPiecesData> pieces ) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: pieces.map((e) => _buildVisualMapItemWidget(e)).toList(),
    );
  }

  Widget _buildVisualMapItemWidget( BaseChartPiecesData data ) {
    return Row(
      children: [
        Container( height: 10.0, width: 10.0, decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(10)), color: _transformColor( data.color )), margin: const EdgeInsets.only( right: 4.0 ), ),
        Text( data.label, style: Theme.of(context).textTheme.bodyText2.copyWith( fontSize: 12.0 ) ),
      ],
    );
  }

  void _onCloseScreen() {
    Navigator.of(context).pop();
  }

  /// 字符串变color
  Color _transformColor(String hexColor) {
    hexColor = hexColor.toUpperCase().replaceAll("#", "");
    hexColor = hexColor.replaceAll('0X', '');
    if (hexColor.length == 6) {
      hexColor = "FF" + hexColor;
    }
    return Color(int.parse(hexColor, radix: 16));
  }

  void _handleModel(){
    this._option = {
      'tooltip': {
        'trigger': 'item',
        'position': [10,10],
        'formatter': widget.model?.tooltipFormatter?.toJson()
      },
      'visualMap': {
        'type': 'piecewise',
        'splitNumber': widget.model?.pieces?.length,
        'pieces': widget.model?.pieces?.map((e) => e.toJson())?.toList(),
        'textStyle': {
          'fontSize': 8
        },
        'text': widget.model.visualMapTexts,
        'textGap': 5,
        'itemGap': 5,
        'itemHeight': 6,
        'itemWidth': 10,
        'showLabel': true,
        'left': 'center',
        'top': 'bottom',
        'show': false
      },
      'series': [
        {
          'type': 'map',
          'map': widget.model?.name ?? 'china',
          'zoom': 1.2,
          'roam': true,
          'top': 'middle',
          'showLegendSymbol': false,
          'label': {
            'show': false,
            'emphasis': {
              'show': true
            },
            "position": 'center',
            "textStyle": { "color": 'rgba(0,0,0,0.7)' },
            "fontSize": 6,
            'formatter': widget.model?.labelFormatter?.toJson(),
            'offset': [ 10, 0 ]
          },
          'scaleLimit': {
            'min': 1.2,
          },
          'itemStyle': {
            'areaColor': '#fff'
          },
          'nameProperty': 'id',
          'markPoint': {
            'symbol': 'circle',
            'symbolSize': '5',
            'label': { 'show': true, 'position': 'right', 'color': 'rgba(0,0,0,0.7)', 'fontSize': 10 },
            'data': [
              { 'name': '乌鲁木齐', 'coord': [ 87.68, 43.77 ], 'value': '乌鲁木齐' },
              { 'name': '石家庄', 'coord': [ 114.48, 38.03 ], 'value': '石家庄' },
              { 'name': '太原', 'coord': [ 112.53, 37.87 ], 'value': '太原' },
              { 'name': '沈阳', 'coord': [ 123.38, 41.8 ], 'value': '沈阳' },
              { 'name': '长春', 'coord': [ 125.35, 43.88 ], 'value': '长春' },
              { 'name': '哈尔滨', 'coord': [ 126.63, 45.75 ], 'value': '哈尔滨' },
              { 'name': '南京', 'coord': [ 118.78, 32.04 ], 'value': '南京' },
              { 'name': '杭州', 'coord': [ 120.19, 30.26 ], 'value': '杭州' },
              { 'name': '合肥', 'coord': [ 117.27, 31.86 ], 'value': '合肥' },
              { 'name': '福州', 'coord': [ 119.3, 26.08 ], 'value': '福州' },
              { 'name': '南昌', 'coord': [ 115.89, 28.68 ], 'value': '南昌' },
              { 'name': '济南', 'coord': [ 117, 36.65 ], 'value': '济南' },
              { 'name': '郑州', 'coord': [ 113.65, 34.76 ], 'value': '郑州' },
              { 'name': '广州', 'coord': [ 113.23, 23.16 ], 'value': '广州' },
              { 'name': '长沙', 'coord': [ 113, 28.21 ], 'value': '长沙' },
              { 'name': '武汉', 'coord': [ 114.31, 30.52 ], 'value': '武汉' },
              { 'name': '海口', 'coord': [ 110.35, 20.02 ], 'value': '海口' },
              { 'name': '成都', 'coord': [ 104.06, 30.67 ], 'value': '成都' },
              { 'name': '贵阳', 'coord': [ 106.71, 26.57 ], 'value': '贵阳' },
              { 'name': '昆明', 'coord': [ 102.73, 25.04 ], 'value': '昆明' },
              { 'name': '西安', 'coord': [ 108.95, 34.27 ], 'value': '西安' },
              { 'name': '兰州', 'coord': [ 103.73, 36.03 ], 'value': '兰州' },
              { 'name': '西宁', 'coord': [ 101.74, 36.56 ], 'value': '西宁' },
              { 'name': '台北', 'coord': [ 121.50, 25.05 ], 'value': '台北' },
              { 'name': '呼和浩特', 'coord': [ 111.65, 40.82 ], 'value': '呼和浩特' },
              { 'name': '拉萨', 'coord': [ 91.11, 29.97 ], 'value': '拉萨' },
              { 'name': '银川', 'coord': [ 106.27, 38.47 ], 'value': '银川' },
              { 'name': '南宁', 'coord': [ 108.22, 22.48 ], 'value': '南宁' },
              { 'name': '重庆', 'coord': [ 106.54, 29.59 ], 'value': '重庆' },
            ]
          },
          'data': widget.model?.data?.map((e) => e.toJson())?.toList()
        }
      ],
    };
  }

}
